<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
</head>

<body>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.js"></script>


    <section class="magick_shop_box">
        <div class="content">
            <div class="child-box">
                <span>待发货</span>
                <div class="child">
                    <p><span>117</span>个</p>
                    <img src="http://magick.plugin/wp-content/uploads/2011/07/windmill.jpg">
                </div>
            </div>
        </div>
        <div class="content">
            <div class="child-box">
                <span>今日总销售额（已减退款）</span>
                <div class="child">
                    <p><span>8577</span>￥</p>
                    <img src="http://magick.plugin/wp-content/uploads/2011/07/windmill.jpg">
                </div>
            </div>
        </div>
        <div class="content">
            <div class="child-box">
                <span>今日总订单（已减退款）</span>
                <div class="child">
                    <p><span>117</span>个</p>
                    <img src="http://magick.plugin/wp-content/uploads/2011/07/windmill.jpg">
                </div>
            </div>
        </div>
        <div class="content">
            <div class="child-box">
                <span>今日总退款</span>
                <div class="child">
                    <p><span>8577</span>￥</p>
                    <img src="http://magick.plugin/wp-content/uploads/2011/07/windmill.jpg">
                </div>
            </div>
        </div>
        <div class="content">
            <div class="child-box">
                <span>今日总退款订单</span>
                <div class="child">
                    <p><span>1217</span>个</p>
                    <img src="http://magick.plugin/wp-content/uploads/2011/07/windmill.jpg">
                </div>
            </div>
        </div>

    </section>

    <!--四栏分隔-->
    <section class="magick_four-column">
        <div class="content">
            <!--最近7天总销售额-->
            <div id="total-sales"></div>
        </div>
        <div class="content">
            <!--最近7天总销售订单-->
            <div id="total-order"></div>
        </div>
        <div class="content">
            <!--最近7天总退款销售额-->
            <div id="total-refund"></div>
        </div>
        <div class="content">
            <!--最近7天总退款订单-->
            <div id="total-refund-order"></div>
        </div>
    </section>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        //最近7天总销售额
        let total_sales = echarts.init(document.getElementById("total-sales"));
        //最近7天总销售订单
        let total_order = echarts.init(document.getElementById("total-order"));
        //最近7天总退款销售额
        let total_refund = echarts.init(document.getElementById("total-refund"));
        //最近7天总退款订单
        let total_refund_order = echarts.init(document.getElementById("total-refund-order"));



        // 指定图表的配置项和数据
        let total_sales_option = {
            title: {
                text: "最近7天总销售额",
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };

        let total_order_option = {
            title: {
                text: "最近7天总销售订单",
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };

        let total_refund_option = {
            title: {
                text: "最近7天总退款销售额",
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };

        let total_refund_order_option = {
            title: {
                text: "最近7天总退款订单",
            },
            tooltip: {
                valueFormatter: (value) => value.toFixed(2) + '￥'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        //最近7天总销售额
        total_sales.setOption(total_sales_option);
        //最近7天总销售订单
        total_order.setOption(total_order_option);
        //最近7天总退款销售额
        total_refund.setOption(total_refund_option);
        //最近7天总退款订单
        total_refund_order.setOption(total_refund_order_option);


    </script>


</body>

</html>